<template>
  <view class="poster-official-center-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        投稿号
      </view>
    </navigation-bar>
    <view class="main-content-wrapper" :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px)`}">
      <!-- 选择日期查看 -->
      <view class="date-tab-content">
        <view class="above-title">
          日期
        </view>
        <view class="sub-tab-wrap">
          <view class="tab-item" :class="{'tab-item_active': index === current}" v-for="(item, index) in nearSevenDays"
            :key="index" @click="onClickDate(index)">{{item}}</view>
        </view>
      </view>
      <!-- 帖子内容 -->
      <swiper class="swiper-wrap" :current="current" :duration="300" @change="onSwiperChange">
        <swiper-item class="swiper-item" v-for="(postGrid, index) in mapDaysPostGrid" :key="index">
          <z-paging :ref="'paging' + index" v-model="mapDaysPostGrid[index]" :refresher-enabled="true"
            :use-cache="false" @query="onQuery(index)">
            <view class="post-content">
              <!-- 用户信息 -->
              <view class="top-official-info">
                <!-- 左侧信息 -->
                <view class="left-info">
                  <view class="avatar-box">
                    <image class="inner-pic" src="/static/official.png" mode="aspectFill"></image>
                  </view>
                  <view class="follow-info">
                    <view class="name" style="padding: 5rpx 0;">
                      投稿号-长春理工大学
                    </view>
                    <view class="statistics" style="padding: 5rpx 0;font-size: 20rpx;color: #0191FF;">
                      2023年8月17日 <text style="margin: 0 10rpx;">·</text> 1.2w人看过
                    </view>
                  </view>
                </view>
                <!-- 右侧控件 -->
                <navigator url="/thirdpkg/post-report/post-report" hover-class="none" class="right-actions iconfont">
                  &#xe611;
                </navigator>
              </view>
              <!-- 帖子列表 -->
              <view class="post-list">
                <!-- 标签 -->
                <view class="tag-item" v-for="(tagItem,i) in postGrid" :key="tagItem.id">
                  <view class="tag-name">
                    #{{tagItem.tag}}
                  </view>
                  <view class="post-grid">
                    <navigator url="/thirdpkg/post-detail/post-detail?postType=求购" class="post-item" hover-class="none"
                      v-for="post in tagItem.postList" :key="post.id">
                      <view class="post-item_skeleton"></view>

                      <view class="post-item_inner">
                        <view class="post-item-text" v-if="post.text !== ''">
                          <view class="text">
                            <text>{{post.text}}</text>
                          </view>
                        </view>
                        <view class="post-item-img" v-else>
                          <image class="img" :src="post.img" mode="aspectFill"></image>
                        </view>
                      </view>
                    </navigator>
                    <!-- 更多 -->
                    <view class="post-item" @click="onClickMore(tagItem)" v-if="Object.keys(tagItem.nextPost).length">
                      <view class="post-item_skeleton"></view>
                      <view class="post-item_inner">
                        <view class="post-more">
                          更多内容
                        </view>
                        <view class="post-item-text" style="filter: blur(2rpx);" v-if="tagItem.nextPost.text !== ''">
                          <view class="text">
                            <text>{{tagItem.nextPost.text}}</text>
                          </view>
                        </view>
                        <view class="post-item-img" style="filter: blur(4rpx);" v-else>
                          <image class="img" :src="tagItem.nextPost.img" mode="aspectFill">
                          </image>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  export default {
    mixins: [naviHeightMix],
    data() {
      return {
        current: 0, // 当前选中项
        nearSevenDays: [], // 最近 7 天的日期
        mapDaysPostGrid: [],
        demoGrid: [],
        postGrid: [{
            id: 10001,
            tag: '情感',
            postList: [{
                id: 1,
                text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
                img: 'a'
              },
              {
                id: 2,
                text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
                img: 'b'
              },
              {
                id: 3,
                text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
                img: 'c'
              },
              {
                id: 4,
                text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
                img: 'd'
              },
              {
                id: 5,
                text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
                img: 'e'
              },
              {
                id: 6,
                text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
                img: 'f'
              },
              {
                id: 7,
                text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
                img: 'i'
              },
              {
                id: 8,
                text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
                img: 'j'
              },
              {
                id: 9,
                text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
                img: 'k'
              },
              {
                id: 10,
                text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
                img: 'l'
              },
              {
                id: 11,
                text: '',
                img: '/static/post-cover1.png'
              },
            ],
            nextPost: {
              id: 12,
              text: '',
              img: '/static/post-cover2.png'
            }
          },
          {
            id: 2001,
            tag: '求助',
            postList: [{
              id: 21,
              text: "捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！",
              img: ''
            }],
            nextPost: {}
          }
        ], // demo data
        scrollTop: 0, // 滚动区域的 scrollTop
        isRefresh: false, // 下拉刷新状态
        isLoadMore: false, // 加载更多状态
        load_status: 'loading', //loading/nomore/loadmore
        loadingText: '努力加载中',
        loadmoreText: '轻轻上拉',
        nomoreText: '实在没有了',
      };
    },
    onLoad() {
      // 最近 7 天的日期
      const today = new Date()
      for (var i = 0; i < 7; i++) {
        var previousDay = new Date(today)
        previousDay.setDate(today.getDate() - i)
        this.nearSevenDays.push(previousDay.getDate())
      }

      // 演示数据
      this.mapDaysPostGrid = [
        [],
        [],
        [],
        [],
        [],
        [],
        []
      ]
      this.mapDaysPostGrid[0] = this.demoGrid = this.postGrid

      this.$nextTick(() => {
        this.$refs[`paging0`][0].reload()
      })
    },
    methods: {
      // 点击日期时
      onClickDate: function(index) {

        if (index === this.current) {
          this.$refs[`paging${index}`][0].reload()
        } else if (this.mapDaysPostGrid[index].length === 0) {
          this.$refs[`paging${index}`][0].reload()
        }

        this.current = index
      },
      // 轮播图切换时
      onSwiperChange: function(e) {
        const index = e.detail.current
        if (e.detail.source === '') return

        if (this.mapDaysPostGrid[index].length === 0) {
          this.$refs[`paging${index}`][0].reload()
        }

        this.current = index
      },
      // 点击更多内容
      onClickMore: function(tagItem) {
        const nextPost = {}

        tagItem.nextPost = nextPost
        tagItem.postList.push({
          id: 31,
          text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
          img: 'a'
        }, {
          id: 32,
          text: '捞一下本校上岸兰州大学化学系的学长或者学姐，想要请教一点问题，有偿！',
          img: 'a'
        })
      },

      // 请求
      onQuery: function(index) {
        console.log('ok');
        this.$refs[`paging${index}`][0].complete(this.mapDaysPostGrid[index])
      }
    },
  }
</script>

<style lang="scss">
  .poster-official-center-container {
    height: 100%;

    .main-content-wrapper {
      overflow: hidden;

      .date-tab-content {
        margin-top: 20rpx;
        padding: 0 20rpx;

        .above-title {
          font-size: 36rpx;
          line-height: 54rpx;
          color: #0091FF;
          margin-left: 30rpx;
        }

        .sub-tab-wrap {
          display: flex;
          align-items: center;
          width: 100%;
          height: 80rpx;

          .tab-item {
            text-align: center;
            font-size: 28rpx;
            flex: 1;
          }

          .tab-item_active {
            color: #0091FF;
          }
        }
      }

      .swiper-wrap {
        box-sizing: border-box;
        width: 100%;
        height: calc(100% - 174rpx);
        margin-top: 20rpx;
        padding-bottom: 20rpx;

        .swiper-item {
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          padding: 0 12rpx;

          .post-content {
            box-sizing: border-box;
            height: 100% !important;

            .top-official-info {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 110rpx;
              padding-top: 20rpx;

              .left-info {
                display: flex;
                align-items: center;

                .inner-pic {
                  width: 80rpx;
                  height: 80rpx;
                  border-radius: 50rpx;
                  margin-left: 20rpx;
                }

                .follow-info {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  margin-left: 30rpx;
                }
              }

              .right-actions {
                padding: 10rpx;
                font-size: 40rpx;
                line-height: 40rpx;
              }
            }

            .post-list {
              margin-top: 20rpx;

              .tag-item {
                .tag-name {
                  margin: 20rpx;
                  font-size: 28rpx;
                  color: #0091FF;
                }

                .post-grid {

                  width: 100%;
                  display: grid;
                  grid-template-columns: repeat(3, 1fr);
                  gap: 8rpx;



                  .post-item {
                    position: relative;
                    overflow: hidden;
                    background-color: #F0F0F0;
                    border-radius: 12rpx;


                    .post-item_skeleton {
                      padding-top: 100%;
                    }

                    .post-item_inner {
                      position: absolute;
                      top: 0;
                      width: 100%;
                      height: 100%;

                      .post-item-text {
                        box-sizing: border-box;
                        width: 100%;
                        height: 100%;
                        padding: 20rpx;
                        overflow: hidden;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .text {
                          text-align: center;
                          font-size: 20rpx;
                          overflow: hidden;
                          -webkit-line-clamp: 6;
                          text-overflow: ellipsis;
                          display: -webkit-box;
                          -webkit-box-orient: vertical;
                        }
                      }

                      .post-item-img {
                        width: 100%;
                        height: 100%;

                        .img {
                          width: 100%;
                          height: 100%;
                        }
                      }
                    }

                    .post-more {
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%, -50%);
                      font-size: 28rpx;
                      z-index: 1;
                    }
                  }
                }
              }
            }

            .bottom-load-data-tip {
              overflow: hidden;
              height: 70rpx;
              margin-top: 20rpx;
            }
          }
        }
      }
    }
  }
</style>